import {onMounted, watch, ref} from "vue";
import echartsUtil from "@/commons/utils/echartsUtil";
import NumberUtil from "@/commons/utils/numberUtil";
import TextUtil from "@/commons/utils/TextUtil";
import useBaseBarLineCharOption from "@/composables/useBaseBarLineCharOption";
import {useRoute} from "vue-router";

export default function useSzGoodsChartOperate(myChart, dbData, filterOption) {
    let myChartInstance;
    let myChartOption;
    const type = useRoute().params.type;
    const {setMyChartOptionData} = useBaseBarLineCharOption();
    const seriesOption = ref({});
    const statsDict = {
        cum: 'parentCum',
        month: 'parent',
    }
    const szDict = {
        total: '',
        fre: 'Fre',
        out: 'Out',
        in: 'In',
        freOut: 'FreOut',
        freIn: 'FreIn',
    }

    const setSzSeriesOption = () => {
        let sz = dbData.value.filter(item => item.portNameCn === '全港合计');
        let ns = dbData.value.filter(item => item.portNameCn === '南山港区');
        let yt = dbData.value.filter(item => item.portNameCn === '盐田港区');
        let dcw = dbData.value.filter(item => item.portNameCn === '大铲湾港区');
        let dp = dbData.value.filter(item => item.portNameCn === '大鹏港区');
        let ba = dbData.value.filter(item => item.portNameCn === '宝安港区');

        seriesOption.value = {
            titleText: '深圳港货物吞吐量',
            legendData: ['全港', '南山', '盐田', '大铲湾', '大鹏', '宝安', '全港增速', '南山增速', '盐田增速', '大铲湾增速', '大鹏增速', '宝安增速'],
            xAxisData: sz.map(item => TextUtil.getTimeLabel(filterOption.time, item)),
            yAxisName: ['吞吐量(万TEU)', '增速/占比'],
            seriesType: ['bar', 'bar', 'bar', 'bar', 'bar', 'bar', 'line', 'line', 'line', 'line', 'line', 'line'],
            yAxisIndex: [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1],
            itemStyle: [
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#0072FF', '#00D5FF'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#DD025D', '#DD555D'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#266765', '#4BC6C1'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#b97829', '#F1AC58'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#2b620a', '#7DC852'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#132250', '#597EF7'),
                {normal: {color: '#00D5FF'}},
                {normal: {color: '#DD555D'}},
                {normal: {color: '#4BC6C1'}},
                {normal: {color: '#F1AC58'}},
                {normal: {color: '#7DC852'}},
                {normal: {color: '#597EF7'}},
            ],
            seriesData: [
                sz.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                ns.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                yt.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                dcw.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                dp.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                ba.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                sz.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                ns.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                yt.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                dcw.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                dp.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                ba.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
            ],
            seriesArray: []
        }

        seriesFormat()
    }

    const seriesFormat = () => {
        seriesOption.value.legendData.forEach((item, index) => {
            seriesOption.value.seriesArray.push({
                name: item,
                yAxisIndex: seriesOption.value.yAxisIndex[index],
                type: seriesOption.value.seriesType[index],
                data: seriesOption.value.seriesData[index],
                itemStyle: seriesOption.value.itemStyle[index]
            })
        })
    }

    const setSzNsSgSeriesOption = () => {
        let ns = dbData.value.filter(item => item.portNameCn === '南山港区');
        let sk = dbData.value.filter(item => item.portNameCn === '蛇口集装箱码头有限公司');
        let cw = dbData.value.filter(item => item.portNameCn === '赤湾集装箱码头有限公司');
        let zs = dbData.value.filter(item => item.portNameCn === '招商港务（深圳）有限公司');

        seriesOption.value = {
            titleText: '南山港区货物吞吐量',
            legendData: ['南山', '蛇口', '赤湾', '招商港务', '南山增速', '蛇口增速', '赤湾增速', '招商港务增速'],
            xAxisData: ns.map(item => TextUtil.getTimeLabel(filterOption.time, item)),
            yAxisName: ['吞吐量(万TEU)', '增速/占比'],
            seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line', 'line'],
            yAxisIndex: [0, 0, 0, 0, 1, 1, 1, 1],
            itemStyle: [
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#0072FF', '#00D5FF'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#DD025D', '#DD555D'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#266765', '#4BC6C1'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#b97829', '#F1AC58'),
                {normal: {color: '#00D5FF'}},
                {normal: {color: '#DD555D'}},
                {normal: {color: '#4BC6C1'}},
                {normal: {color: '#F1AC58'}},
            ],
            seriesData: [
                ns.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                sk.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                cw.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                zs.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Thr']/10000, 2)),
                ns.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                sk.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                cw.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
                zs.map(item => NumberUtil.toFixed(item[statsDict[filterOption.stats] + szDict[filterOption.type] + 'Growth'], 2)),
            ],
            seriesArray: []
        }

        seriesFormat();
    }

    const setJumpPage = () => {
        if (type === 'sz') {
            myChartInstance.on('click', function (params) {
                let name = params.seriesName;
                if (name === '南山') {
                    window.AC.SetWindowVisible([{id: 6, visible: false}]);
                    window.AC.ShowCustomWindow('sz-ns-sg-goods-middle-dialog', 'http://localhost:8080/#/sz-goods-middle-home/sz-ns-sg?' + 'time=' + filterOption.time + '&year=' + filterOption.year + '&stats=' + filterOption.stats + '&type=' + filterOption.type, 1200, 800, 360, 113, true, {
                        draggable: false,
                        resize: false
                    });
                }
            });
        }
    }

    const setMyChartOption = () => {
        if (type === 'sz') {
            setSzSeriesOption()
        } else {
            setSzNsSgSeriesOption()
        }
        myChartOption = setMyChartOptionData(seriesOption)
        setJumpPage(myChartInstance);
        myChartInstance.setOption(myChartOption, true);
    }

    onMounted(() => {
        myChartInstance = echartsUtil.initMyChart(myChart.value)
    })

    watch(dbData, setMyChartOption)

    return {
        myChartInstance,
        setMyChartOption,
        setMyChartOptionData
    }
}